<template>
  <div class="main">
    <template v-if="lists && lists.length > 0">
      <div class="list" v-for="list in lists" :key="list.id">
        <van-radio-group v-model="radio" @change="handleSelectStation">
          <van-radio :name="list.id">
            <div class="content">
              <div class="address-wrap">
                <div class="shop">
                  <img class="icon" :src="WaterIcon" alt srcset>
                  <span>{{list.name}}</span>
                </div>
                <div class="address">
                  <p>{{list.address_linkage_str}}</p>
                </div>
              </div>
              <div class="distance-wrap">{{list.distance | distanceFotmat}}</div>
            </div>
          </van-radio>
        </van-radio-group>
      </div>
    </template>
    <template v-else>
      <EmptyTips text="该地区3km内没有水站" :image="LocationEmpty" />
    </template>
  </div>
</template>

<script>
import EmptyTips from "@/components/common/EmptyTips";
import LocationEmpty from "../../assets/common/location-empty.png";
import WaterIcon from "../../assets/common/water.png";
export default {
  props: ["lists"],
  components: {
    EmptyTips
  },
  filters: {
    distanceFotmat(v) {
      return `${v}m`;
    }
  },
  data() {
    return {
      radio: "",
      WaterIcon,
      LocationEmpty
    };
  },
  methods: {
    handleSelectStation(v) {
      this.$emit("handleSelect", v);
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  border-top: 5px solid #f2f2f2;
}
.list {
  padding: 4vw;
  border-bottom: 1px solid #f9f9f9;
}
.content {
  margin-left: 3vw;
  display: flex;
  width: 75vw;
  justify-content: space-between;
  align-items: center;
  position: relative;
  bottom: -1vw;
  .address-wrap {
    .shop {
      display: flex;
      align-items: center;
      .icon {
        width: 5vw;
        height: 5vw;
      }
    }
    .address {
      margin-top: 2vw;
      font-size: 3vw;
      color: #999;
    }
  }
  .distance-wrap {
    font-size: 3vw;
    color: #999;
  }
}
</style>